<!-- eslint-disable prettier/prettier -->
<!-- 用户编辑弹窗 -->
<template>
	<ele-modal
		:width="750"
		:visible="visible"
		:confirm-loading="loading"
		:title="actionStatus == 'edit' ? '修改' : '新建'"
		:body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible"
		@ok="save"
	>
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="20" :sm="24" :xs="24">
					<a-form-item label="位置" v-bind="validateInfos.type">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="store"
							allow-clear
							v-model:value="location_name"
							placeholder="请选择位置"
							@change="storeChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="仓库位置" v-if="show == 1">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="cangku"
							allow-clear
							v-model:value="form.type_code"
							placeholder="请选择位置"
							@change="cangkuChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="门店2" v-else-if="show == 2">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="mendian"
							allow-clear
							v-model:value="form.type_code"
							placeholder="请选择门店"
							@change="mendianChange"
							autocomplete="off"
						/>
					</a-form-item>
					<template v-else-if="show == 3">
						<a-form-item label="门店1">
							<a-select
							:disabled="actionStatus == 'edit'"
								optionFilterProp="label"
								:options="mendian"
								allow-clear
								v-model:value="store_code"
								placeholder="请选择门店"
								@change="mendianChange2"
								autocomplete="off"
							/>
						</a-form-item>
						<a-form-item label="柜组1">
							<a-select
							:disabled="actionStatus == 'edit'"
								optionFilterProp="label"
								:options="guizu"
								allow-clear
								v-model:value="guizu_name"
								placeholder="请选择柜组"
								@change="guizuChange"
								autocomplete="off"
							/>
						</a-form-item>
					</template>
					
					<a-form-item label="业务日期">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择业务日期" v-model:value="form.business_time" autocomplete="off" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';

import { get_warehouse_list, get_store_list, get_store_group_list, get_user_list } from '@/api/jewelry/receipts_purchase';
import { receipts_purchase_detail } from '@/api/jewelry/receipts_profit';

// 表格列配置
const useForm = Form.useForm;

const props = defineProps({
	// 弹窗是否打开
	visible: Boolean,
	// 编辑edit/新建add
	actionStatus: String,
	// 编辑数据id
	editData: Object,
	storeId: String
});

const emit = defineEmits(['done', 'update:visible']);

// 提交状态
const loading = ref(false);
const cangku = ref([]);
const store = ref([{ label: '总店', value: '1' }, { label: '门店', value: '2' }]);

const show = ref(0);
const guizu = ref([]);
const mendian = ref([]);
const store_code = ref(null);
const guizu_name = ref(null);
const location_name = ref(null);

onMounted(async () => {
	await get_warehouse_list({ page: 1, limit: 9999 }).then(res => {
		cangku.value = res.list.map(item => {
			return {
				value: String(item.code),
				label: item.name
			};
		});
	});
	await get_store_list({ page: 1, limit: 9999 }).then(res => {
		mendian.value = res.list.map(item => {
			return {
				value: String(item.code),
				label: item.name
			};
		});
	});

	if (props.editData.code) {
		form.code = props.editData.code;
		await receipts_purchase_detail({ code: props.editData.code }).then(res => {
			Object.keys(form).forEach(key => {
				form[key] = res.receipts_detail ? res.receipts_detail[key] : '';
			});
			show.value = form.type;
			store.value.forEach((item)=>{
				if(item.value == show.value){
					location_name.value = item.label;
				}
			})
			store_code.value = res.receipts_detail?.store_code;
			guizu_name.value = res.receipts_detail?.type_name;	
			
		});
	}
});

const getStoreGroup = store_code => {
	get_store_group_list({ page: 1, limit: 5000, store_code: store_code }).then(async res => {
		guizu.value = await res.list.map(item => {
			return {
				value: String(item.code),
				label: item.name
			};
		});
	});
};
/* 更新仓库数据 */
const cangkuChange = value => {
	console.log('仓库', value);
	form.type_code = value;
};
/* 更新分配数据 */
const storeChange = value => {
	console.log('位置', value);
	form.type = value;
	show.value = value;
};
/* 更新柜组数据 */
const guizuChange = value => {
	console.log('柜组', value);
	form.type_code = value;
};
/* 更新门店数据 */
const mendianChange = value => {
	console.log('门店', value);
	form.type_code = value;
	getStoreGroup(value);
};
const mendianChange2 = value => {
	console.log('门店', value);
	form.to_type_code = '';
	getStoreGroup(value);
};

// 表单数据
const form = reactive({
	code:'',
	type: '',
	type_code: '',
	business_time: ''
});
// 表单验证规则
const rules = reactive({
	type: [
		{
			required: true,
			message: '请选择位置',
			trigger: 'change'
		}
	]
});

const { validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
	validate()
		.then(() => {
			emit('done', form);
		})
		.catch(() => {});
};
/* 更新visible */
const updateVisible = value => {
	emit('update:visible', value);
};
</script>
<style scoped></style>
